<template>
	<div class="aside-list" :class="{ 'active' : active }">
		<span class="truncate">
			<slot />
		</span>
		<el-button type="primary" text class="ml-auto px-1" size="small" @click.stop="$emit('edit')">
			<el-icon :size="12" color="#0080ff">
				<Edit />
			</el-icon>
		</el-button>

		<el-popconfirm title="是否删除该分类？" confirm-button-text="确定" 
		cancel-button-text="取消" @confirm.stop="$emit('delete')">
			<template #reference>
				<el-button type="primary" text class="px-1" size="small">
					<el-icon :size="12" color="#0080ff">
						<Close />
					</el-icon>
				</el-button>
			</template>
		</el-popconfirm>

	</div>
</template>

<script setup>
	defineProps({
		active: {
			type: Boolean,
			default: false
		}
	})
	defineEmits(["edit", "delete"])
</script>

<style scoped>
	.aside-list {
		border-bottom: 1px solid whitesmoke;
		display: flex;
		align-items: center;
		padding: 10px;
		size: 8px;
		color: #5b5b5b;
		cursor: pointer;
	}

	.aside-list:hover,
	.active {
		background-color: #acd6ff;
	}
</style>